<clr-modal [(clrModalOpen)]="createOpened" [clrModalStaticBackdrop]="staticBackDrop"
           [clrModalClosable]="closable">
  <h3 class="modal-title">添加备份账号</h3>

  <div class="modal-body modal-height">
    <form clrForm #backupStorageForm="ngForm">
      <clr-input-container>
        <label>名称:</label>
        <input clrInput size=45 maxlength="15" type="text" pattern="{{name_pattern}}" [(ngModel)]="item.name" name="name" required>
        <clr-control-helper>{{name_pattern_tip}}</clr-control-helper>
        <clr-control-error>{{name_pattern_tip}}</clr-control-error>
      </clr-input-container>
      <clr-select-container>
        <label>类型:</label>
        <select clrSelect name="type" [(ngModel)]="item.type" (ngModelChange)="changeType()" required>
          <option value="OSS">oss</option>
          <option value="S3">s3/ceph</option>
          <option value="AZURE">azure</option>
          <!--                  <option value="Ceph">ceph</option>-->
        </select>
      </clr-select-container>
      <clr-input-container *ngIf="item.type=='OSS' || item.type=='S3'">
        <label>AccessKey:</label>
        <input clrInput size=45 type="text" [(ngModel)]="credential.accessKey" name="accessKey" required>
      </clr-input-container>
      <clr-password-container *ngIf="item.type=='OSS' || item.type=='S3'">
        <label>SecretKey:</label>
        <input clrPassword size=45 type="password" [(ngModel)]="credential.secretKey" name="secretKey" required>
      </clr-password-container>
      <clr-input-container *ngIf="item.type=='OSS' || item.type=='S3'">
        <!--  因为s3传endpoint 会导致验证失败 所以暂时先注释|| item.type=='S3'-->
        <label>端点:</label>
        <input clrInput size=45 type="text" [(ngModel)]="credential.endpoint" name="endpoint" required>
        <clr-control-helper *ngIf="item.type=='S3'">S3: http://s3.REGION_NAME.amazonaws.com</clr-control-helper>
        <clr-control-helper *ngIf="item.type=='S3'">S3(China): http://s3.REGION_NAME.amazonaws.com.cn
        </clr-control-helper>
        <clr-control-helper *ngIf="item.type=='S3'">如: http://s3.cn-north-1.amazonaws.com.cn</clr-control-helper>
        <clr-control-helper *ngIf="item.type=='OSS'">OSS: http://REGION_NAME.aliyuncs.com</clr-control-helper>
        <clr-control-helper *ngIf="item.type=='OSS'">如:http://oss-cn-hangzhou.aliyuncs.com</clr-control-helper>
      </clr-input-container>
      <clr-select-container *ngIf="item.type=='OSS' || item.type=='S3'">
        <label>桶名称:</label>
        <select clrSelect name="bucket" [(ngModel)]="credential.bucket" required>
          <option *ngFor="let bucket of buckets" value="{{bucket}}">{{bucket}}</option>
        </select>
      </clr-select-container>
      <clr-input-container *ngIf="item.type=='AZURE'">
        <label>账户名称:</label>
        <input clrInput size=45 type="text" [(ngModel)]="credential.accountName" name="accountName" required>
      </clr-input-container>
      <clr-password-container *ngIf="item.type=='AZURE'">
        <label>账户密钥:</label>
        <input clrPassword size=45 type="password" [(ngModel)]="credential.accountSecret" name="accountSecret" required>
      </clr-password-container>
      <clr-select-container *ngIf="item.type=='AZURE'">
        <label>端点后缀:</label>
        <select clrSelect name="endpoint_suffix" [(ngModel)]="credential.endpointSuffix" required>
          <option value="core.chinacloudapi.cn">core.chinacloudapi.cn</option>
          <option value="core.windows.net">core.windows.net</option>
        </select>
      </clr-select-container>
      <clr-select-container *ngIf="item.type=='AZURE'">
        <label>容器名称:</label>
        <select clrSelect name="container" [(ngModel)]="credential.container" required>
          <option *ngFor="let bucket of buckets" value="{{bucket}}">{{bucket}}</option>
        </select>
      </clr-select-container>
      <app-modal-alert #alertModal></app-modal-alert>
    </form>
    <div class="modal-footer">
      <button type="button" class="btn btn-success-outline" (click)="getBuckets(credential)" [disabled]="isSubmitGoing">
        获取桶/容器
      </button>
      <button type="button" class="btn btn-outline" (click)="onCancel()" [disabled]="isSubmitGoing">取消</button>
      <button type="submit" class="btn btn-primary" (click)="onSubmit()" [disabled]="backupStorageForm.invalid">提交
      </button>
    </div>
  </div>
</clr-modal>
